<template>
	<view class="update">
		<view class="title">
			发布
		</view>
		<view class="list">
			<view class="text">上传作品</view>
			<view class="fileContent videoContent">
				 <view class="inputVideo" @click="handlerChoiceVideo" :style="{'z-index': !choiceVideo ? jinDuIndex3 : 1}">
					 {{!choiceVideo ? '+上传作品' : ''}}
				 </view>
				 <view class="jinDuTiao" @click="handlerChoiceVideo" :style="{'z-index': choiceVideo ? jinDuIndex2 : 1, 'width': jinDu + '%'}"></view>
				 <view class="jinDuWb" @click="handlerChoiceVideo" :style="{'z-index': choiceVideo ? jinDuIndex3 : 2}">
					 {{choiceVideo ? '正在上传...' + jinDu + '%' : ''}}
				 </view>
			</view>
		</view>
		<view class="list">
			<view class="text">选择封面</view>
			<view class="fileContent">
				 <view 
					class="inpurFm"
					@click="handlerChoiceFm"
					:class="choiceFm ? 'isFmed' : '' "
					:style="{'background-image' : 'url(' + tempFmSrc + ')'}">
					 选择封面
				 </view>
			</view>
		</view>
		<view class="btContent">
			<view class="bt">标题</view>
			<textarea class="textarea" v-model="title" placeholder="写标题并使用合适的类型，能让更多人看到喔~"></textarea>
		</view>
		<view class="type">
			<view class="typeList" @click="setIcon({id: 1, name: '测试用'})">#测试用</view>
			<view class="typeList" :key="item.id" v-for="item in hotList" @click="setIcon(item)">
				{{'#' + item.name}}
			</view>
		</view>
		<view class="sendContent">
			<button 
			class="send" 
			:disabled="!successVideo" 
			@click="sendSave" 
			:style="{'background-color': successVideo ? '#E62D54' : '#1C1B2B', 'color': successVideo ? 'white' : '#747384'}">
				发布
			</button>
		</view>
	</view>
</template>
	
<script>
	import {apiPostUpLoadSend} from '../../api/upLoad.js'
	import {apiGetClass} from '../../api/class.js'
	import { baseUrl } from '../../config.js'
	export default {
		data() {
			return {
				hotList: [],
				choiceVideo: null,
				choiceFm: null,
				tempFmSrc: '',
				title: '',
				successVideo: null,
				successFm: null,
				uploadTask: null,
				jinDu: 0,
				jinDuIndex1: 1,
				jinDuIndex2: 2,
				jinDuIndex3: 3,
			}
		},
		methods: {
			// 获取热门分类
			getHotClass() {
				var self = this
				apiGetClass().then((r)=>{
					if (r.status == 0) {
						self.hotList = r.data
					}
				})
			},
			
			// 上传文件
			setUploadFile(fileList, type, path, formType) {
				var self = this
				var data = null
				data = formType == 2 ? {
					type: 2,
					time_length: parseInt(self.choiceVideo.duration),
					width: self.choiceVideo.width,
					height: self.choiceVideo.height
				}: {
					type: 3
				}
				self.uploadTask = uni.uploadFile({
					url: baseUrl + '/user/upload/create',
					files: fileList,
					fileType: type || 'video',
					filePath: path,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					formData: data,
					success:function(rsp){
						console.log('上传成功的情况', rsp)
						self.uploadSuccess(rsp, formType)
					},
					fail:function(e){
						console.log('上传失败的情况', e)
					}
				})
				
				// 设置上传进度
				if (formType == 2 && self.uploadTask) {
					self.uploadTask.onProgressUpdate((res) => {
						self.jinDu = res.progress
					})
				}
			},
			
			// 选择视频
			handlerChoiceVideo() {
				var self = this
				if (self.jinDu > 0 && self.jinDu < 100) {
					uni.showToast({
						title: '正在上传...',
						icon:'none'
					})
					return
				}else if(self.jinDu == 100) {
					uni.showToast({
						title: '请发布视频',
						icon:'none'
					})
					return
				}
				uni.chooseVideo({
					success: (files)=> {
						console.log('选择的视频', files)
						self.choiceVideo = files
						// self.setUploadFile(files, 'video', files.tempFilePath, 2)
						// 准备上传
						self.setUploadFile(files, 'video', files.tempFilePath, 2)
					}
				})
			},
			
			// 选择封面
			handlerChoiceFm() {
				var self = this
				uni.chooseImage({
					count: 1,
					success: (files)=> {
						console.log('选择的封面', files)
						// self.fileUpLoad(files.tempFiles[0], 'image', files.tempFilePaths[0], 3)
						self.choiceFm = files
						self.tempFmSrc = files.tempFilePaths[0]
						self.setUploadFile(files.tempFiles[0], 'image', files.tempFilePaths[0], 3)
					}
				})
			},
			
			// 上传成功的处理
			uploadSuccess (rsp, formType) {
				var self = this
				if (formType == 2) {
					
					self.successVideo = JSON.parse(rsp.data)
					console.log('格式转换后视频', self.successVideo.data)
					if (self.successVideo.data.id) {
						uni.showToast({
							title: '视频上传成功',
							icon: 'success'
						})
					}else {
						setTimeout(()=> {
							self.jinDu = 0
							self.choiceVideo = null
						}, 1000)
						
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				}else {
					self.successFm = JSON.parse(rsp.data)
					console.log('格式转换后封面', self.successFm.data)
					if (self.successFm.data.id) {
						uni.showToast({
							title: '封面上传成功',
							icon: 'success'
						})
					}else {
						setTimeout(()=> {
							self.choiceFm = null
						}, 1000)
						
						uni.showToast({
							title: '封面上传失败',
							icon: 'none'
						})
					}
				}
			},
			
			// 清空数据
			setNull(){
				var self = this
				self.successVideo = null
				self.successFm = null
				self.choiceFm = null
				self.choiceVideo = null
				self.jinDu = 0
				self.title = ''
				self.tempFmSrc = ''
			},
			
			// 快捷选择标签
			setIcon(rsp) {
				this.title += '#' + rsp.name + ' '
			},
			
			// 发布
			sendSave() {
				var self = this
				if (!self.successVideo) {
					uni.showToast({
						title: '请先上传视频'
					})
					return
				}
				console.log('娃哈哈视频ID', self.successVideo.data.id)
				console.log('娃哈哈封面ID', self.successFm.data.id)
				apiPostUpLoadSend({
					title: self.title,
					upload_work_id: self.successVideo.data.id,
					upload_work_cover_id: self.successFm.data.id
				}).then((r)=>{
					console.log('发布结果', r)
					if (r.status == 0) {
						uni.showToast({
							title: '视频发布成功',
							icon: 'success'
						})
						self.setNull()
					}else {
						uni.showToast({
							title: '视频发布失败',
							icon: 'none'
						})
					}
				}).catch((e) => {
					console.log('丢你老母', e)
				})
			}
		},
		mounted() {
		},
		beforeMount() {
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: auto;
		min-height: 100%;
	}
	
	.update{
		width: 100%;
		height: auto;
		.title {
			font-size: 36rpx;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
		
		.list {
			margin-left: 60rpx;
			color: #747384;
			font-size: 32rpx;
			margin-bottom: 60rpx;
			display: flex;
			justify-content: flex-start;
			align-items: top;
			
			.videoContent {
				position: relative;
				height: 80rpx;
				.jinDuTiao {
					position: absolute;
					background-color: #4F215E;
					height: 100%;
					top: 0;
					left: 0;
				}
				
				.jinDuWb {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					text-align: center;
					line-height: 80rpx;
					font-size: 28rpx;
					color: white;
				}
				
				.inputVideo {
					position: absolute;
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
					font-size: 28rpx;
					color: white;
					top: 0;
					left: 0;
				}
			}
			
			.fileContent {
				width: 320rpx;
				margin-left: 40rpx;
				border-radius: 6px;
				background-color: #1C1B2B;
				background-size: cover;
			}
			
			
			.jindu {
				height: 80rpx;
				width: 320rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 6px;
				background-color: #1C1B2B;
			}
			.inpurFm {
				height: 320rpx;
				text-align: center;
				line-height: 320rpx;
				font-size: 28rpx;
				color: white;
				background-size: cover;
				background-repeat: no-repeat;
			}
			
			.isFmed {
				font-size: 0;
			}
		}
		
		.bt {
			color: #747384;
			font-size: 32rpx;
			margin-left: 60rpx;
		}
		.textarea {
			background-color: #1C1B2B;
			font-size: 28rpx;
			color: #747384;
			margin-left: 60rpx;
			padding-left: 10rpx;
			padding-top: 10rpx;
			margin-top: 20rpx;
			border-radius: 4rpx;
			width: 80%;
			height: 300rpx;
			line-height: 30rpx;
		}
		
		.type {
			margin-left: 60rpx;
			display: flex;
			justify-content: flex-start;
			margin-top: 40rpx;
			.typeList {
				width: 140rpx;
				height: 60rpx;
				background-color: #1C1B2B;
				font-size: 24rpx;
				color: #FFD800;
				text-align: center;
				line-height: 60rpx;
				border-radius: 4rpx;
			}
			.typeList:nth-child(n+2) {
				margin-left: 20rpx;
			}
		}
		.sendContent {
			height: 100rpx;
			margin-top: 60rpx;
			position: relative;
			width: 86%;
			margin-left: 7%;
		}
		.send {
			width: 100%;
			background-color: #1C1B2B;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 28rpx;
			position: absolute;
			
		}
		// .jindutiao{
		// 	background-color: #4F215E;
		// 	height: 96rpx;
		// 	line-height: 96rpx;
		// 	text-align: center;
		// 	color: #747384;
		// 	font-size: 28rpx;
		// 	position: absolute;
		// 	border-radius: 12rpx;
		// }
		
	}
	
</style>
